<!--
 * @Description: 基础条形图
 * @Author: xjc
 * @Date: 2022-06-21 10:06:55
 * @LastEditTime: 2022-06-21 10:08:49
 * @LastEditors: xjc
-->
<template>
  <div id="basebar-container" />
</template>

<script setup>
import {onMounted} from 'vue'
// eslint-disable-next-line no-undef
const {Bar} = G2Plot

onMounted(() => renderBasebar())

function renderBasebar() {
  const data = [
    {year: '1951 年', value: 38},
    {year: '1952 年', value: 52},
    {year: '1956 年', value: 61},
    {year: '1957 年', value: 145},
    {year: '1958 年', value: 48},
  ]
  const bar = new Bar('basebar-container', {
    data,
    xField: 'value',
    yField: 'year',
    seriesField: 'year',
    legend: {position: 'top-left'}
  })

  bar.render()
}
</script>
